<script lang="ts" setup>
// import { useRoute, useRouter } from "vue-router"
import { reactive, ref } from "vue"
import { rootPrint } from '@/utils/index'

const pri = ref()
function print() {
  // console.log('pri.value', pri.value)
  rootPrint(pri.value)
}
const s3 = [
  "产品工号",
  "产品名称",
  "物料名称",
  "机号",
  "图号",
  "件号",
  "数量",
  "备注"
]
const tableData2 = []
for (let index = 0; index < 6; index++) {
  tableData2.push({
    name0: "10020017" + (index + 4),
    name1: "印度",
    name2: "前大梁",
    name3: "5#",
    name4: "GYDE-2-3",
    name5: "1/2",
    name6: "23",
    name7: ""
  })
}
const radio1 = ref("否")
const value = ref("")
const checked = ref(true)
const checked1 = ref(true)
const ruleForm = reactive({
  name: "",
  sum: 20
})
const rules = reactive({
  req: [{ required: true, message: "请输入", trigger: "blur" }]
})
const tableData = [
  {
    date: '生产部',
    name: '张三',
    address: '紧急单，请尽快',
    time: '2024-03-29 19:56:24'
  },
  {
    date: '物资部',
    name: '李四',
    address: '好的，收到',
    time: '2024-03-29 19:56:24'
  },
]
</script>

<template>
  <div class="app-container" ref="pri">
    <el-card shadow="never" class="search-wrapper">
      <div style="max-width: 920px" class="m-auto">
        <!-- <div class="py-3 text-right">
        </div> -->
        <div class="py-3 flex">
          <div class="text-2xl flex-1">
            已完成
            <el-button type="primary" class="ml-3" @click="print">打印</el-button>
          </div>
          <div class="pr-5">
            <span class="urgent-stamp">加急订单</span>
          </div>
          <div class="">
            <img class="w-20" src="/code.png" alt="" />
          </div>
        </div>
        <el-steps :active="7" finish-status="success" class="pb-6">
          <el-step title="下单" description="2024-03-25 08:05:58" />
          <el-step title="审批完成" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="待打包" description="2024-03-25 08:05:58" />
          <el-step title="打包中" description="2024-03-25 08:05:58" />
          <el-step title="打包完成" description="2024-03-25 08:05:58" />
          <el-step title="配送完成" description="2024-03-25 08:05:58" />
          <el-step title="订单完成" description="2024-03-25 08:05:58" />
        </el-steps>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        inline
        label-width="auto"
        status-icon
        style="max-width: 920px"
        class="m-auto"
      >
        <el-divider />
        <el-form-item label="申请部门" prop="name">
          <div style="width: 178px">生产部</div>
        </el-form-item>
        <el-form-item label="车间" prop="region">
          <div style="width: 178px">1车间</div>
        </el-form-item>
        <el-form-item label="班组" prop="region">
          <div style="width: 178px">2班组</div>
        </el-form-item>
        <br />
        <el-form-item label="申请人" prop="region">
          <div style="width: 178px">张三</div>
        </el-form-item>
        <el-form-item label="电话" prop="region">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <el-form-item label="收货地点" prop="req">
          <div style="width: 178px">小长兴</div>
        </el-form-item>
        <el-divider />

        <!-- <el-form-item label="是否加急" prop="req">
          <div style="width: 178px; color: red">是</div>
        </el-form-item> -->
        <el-form-item label="审批人" prop="req">
          <div class="flex" style="width: 178px">
            李四
            <img class="w-20" src="/lisi.png" alt="" />
          </div>
        </el-form-item>
        <el-divider />
        <el-table :data="tableData2" class="mb-5">
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column type="index" label="序" width="50" />
          <el-table-column
            v-for="(item, index) in s3"
            :key="index"
            :prop="'name' + index"
            :label="item"
            align="center"
          />
        </el-table>
        <div class="mb-5 flex">
          <div class="flex-1"></div>
          <el-pagination background layout="sizes, prev, pager, next" :total="30" />
        </div>
        <el-divider />
        <el-form-item label="打包人" prop="req">
          <div style="width: 178px">王五</div>
        </el-form-item>
        <el-form-item label="联系电话" prop="req">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <!-- <el-form-item label="打包时间" prop="req">
          <div style="width: 178px">2024-03-25 09:36:29</div>
        </el-form-item> -->

        <el-form-item label="复核人" prop="req">
          <div style="width: 178px">刘文</div>
        </el-form-item>
        <br>
        <el-form-item label="打包照片" prop="req">
          <img style="width: 178px; height: 178px;" src="/dabao.png" alt="" class="mr-2">
          <img style="width: 178px; height: 178px;" src="/dabao.png" alt="">
        </el-form-item>

        <el-divider />
        <!-- <el-form-item label="是否加急单" prop="req">
          <div style="width: 178px">是
          </div>
        </el-form-item> -->
        <el-form-item label="配送人" prop="req">
          <div style="width: 178px">张三
          </div>
        </el-form-item>
        <el-form-item label="联系电话" prop="req">
          <div style="width: 178px">13688889999</div>
        </el-form-item>
        <el-form-item label="配送车辆" prop="req">
          <div style="width: 178px">物流专车：起运一
          </div>
        </el-form-item>
        <!-- <el-form-item label="&nbsp;">
          <div style="width: 178px">
            物流专车
          </div>
        </el-form-item> -->
        <br>
        <el-form-item label="配送照片" prop="req">
          <img style="width: 178px; height: 178px;" src="/dabao.png" alt="" class="mr-2">
          <img style="width: 178px; height: 178px;" src="/dabao.png" alt="">
        </el-form-item>
        <el-divider />

        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="部门" width="180" />
          <el-table-column prop="name" label="姓名" width="180" />
          <el-table-column prop="address" label="备注内容" />
          <el-table-column prop="time" label="备注时间" />
        </el-table>
        <br>

        <el-form-item label="备注">
          <div style="width: 178px">
            <el-input v-model="ruleForm.name" placeholder="请输入" />
          </div>
        </el-form-item>
        <el-form-item label="&nbsp;">
          <div style="width: 178px">
            <el-button type="primary">添加备注</el-button>
          </div>
        </el-form-item>
      </el-form>

      <!-- <el-button>存为草稿</el-button>
      <el-button type="primary">提交</el-button> -->
    </el-card>
  </div>
</template>
<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
.urgent-stamp {
  position: relative;
  display: inline-block;
  padding: 10px;
  background-color: #fff;
  border: 2px dashed #ff0000;
  color: #ff0000;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  transform: rotate(-15deg);
}

.urgent-stamp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background-color: #ff0000;
  opacity: 0.2;
  border-radius: 50%;
  z-index: -1;
}

.urgent-stamp::after {
  /* content: "急件"; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  font-size: 24px;
  font-weight: bold;
  color: #ff0000;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
